<template>
	<view>
		<u-navbar :border-bottom="false"></u-navbar>
		<view class="title acea-row row-column">
			<text>输入短信验证码</text>
			<text class="acea-row row-middle">验证码已发送至<text>+86 {{mobile}}</text></text>
		</view>
		<view class="code">
			<u-message-input focus :breathe="false" mode="bottomLine" :maxlength="6" @finish="finish"
			active-color="#1661ff"
			inactive-color="#1F2329"
			width="67rpx"></u-message-input>
		</view>
		<view class="setCode">
			<text :class="!countDown?'btn':'btn-countDown'" @click="getCode">{{codeText}}</text>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange" @end="countDown=false"></u-verification-code>
		</view>
		<login-footer />		
	</view>
</template>

<script>
	import common from '../../../api/common.js'
	import login from '../../../api/login.js'
	import request from '../../../api/request.js'
	const app = getApp()
	export default{
		data(){
			return{
				common,
				mobile:'',
				codeText: '',
				countDown: false
			}
		},
		onLoad(e) {
			this.$refs.uCode.start()
			this.countDown = true
			this.mobile = e.mobile
		},
		methods:{
			finish(e){
				let data = {
					mobile:this.mobile,
					verifycode:e,
				}
				if(app.globalData.isWxwork){
					data.open_userid = app.globalData.open_userid
					request.go((e)=>{
						login.login_judge(e.data)
					},'/qywechat/mloginm',data,"POST")
				}else{
					request.go((e)=>{
						login.login_judge(e.data)
					},'/Login/xcxplogina',data,"POST")
				}
			},
			codeChange(text) {
				this.codeText = text;
			},
			go2code(){
				if(this.mobile){
					let data = {
						mobile:this.mobile
					}
					if(app.globalData.isWxwork){
						request.go((e)=>{
							uni.hideLoading();
							this.countDown = true
							this.$refs.uCode.start();
						},'/qywechat/sendverifycode',data,'POST')
					}else{
						request.go((e)=>{
							uni.hideLoading();
							this.countDown = true
							this.$refs.uCode.start();
						},'/Login/sendverifycode',data,'POST')
					}
				}
			},
			getCode() {
				// console.log(this.$refs.uCode.canGetCode)
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.go2code()
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style>
	.title{
		margin-top: 96rpx;
		margin-left: 64rpx;
	}
	.title text:nth-child(1){
		font-size: 56rpx;
		font-weight: 500;
		color: #1f2329;
		line-height: 80rpx;
	}
	.title text:nth-child(2){
		font-size: 26rpx;
		font-weight: 400;
		color: #8f959e;
		line-height: 36rpx;
		margin-top: 8rpx;
	}
	.title text:nth-child(2) text{
		font-size: 36rpx;
		font-weight: 500;
		color: #1f2329;
		line-height: 48rpx;
		margin-left: 16rpx;
	}
	.code{
		margin-top: 102rpx;
	}
	.setCode{
		margin-top: 80rpx;
		margin-left: 64rpx;
	}
	.setCode .btn{
		font-size: 28rpx;
		font-weight: 400;
		color: #1661ff;
		line-height: 36rpx;
	}
	.setCode .btn-countDown{
		font-size: 28rpx;
		font-weight: 400;
		color: #646a73;
		line-height: 36rpx;
	}
</style>
